<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>开心农场主</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/index.js"></script>
  <script src="js/public.js"></script>
</head>

<body>
  <div class="wrap">

    <!-- header -->

    <article class="heaDer">

      <div class="header inner clearfix">

        <!-- 左侧logo -->
        <div class="logo fl">
          <a href="#">

            <img src="images/logo1.png" alt="logo">
          </a>
        </div>


        <!-- 右侧导航 -->
        <ul class="nav fr clearfix">
          <li class=" active">
            <div class="nav_rz rmsty"></div>
            <a href="#">
              Home
              <i>Lorem ipsum dolor sit amet</i>
            </a>
          </li>
          <li>
            <div class="nav_rz "></div><a href="#">About<i>Lorem ipsum dolor sit amet</i></a>
          </li>
          <li>
            <div class="nav_rz "></div><a href="#">Products<i>Lorem ipsum dolor sit amet</i></a>
          </li>
          <li>
            <div class="nav_rz "></div><a href="#">Events<i>Lorem ipsum dolor sit amet</i></a>
          </li>
          <li>
            <div class="nav_rz "></div><a href="#">Mail Us<i>Lorem ipsum dolor sit amet</i></a>
          </li>
        </ul>




      </div>


      <!-- 标题轮播 -->
      <div class="bann inner">
        <ul>
          <li class="rati">
            <div class="banner-info">
              <h2>1Steady <span>growth</span> for your farm!</h2>
              <div class="line"> </div>
              <p>Ut sodales erat tortor, eget rhoncus nulla rutrum sit amet. Aliquam sit amet lorem dui. Nulla
                sagittis dolor id mi tincidunt varius. Donec quis suscipit tortor vel pellentesque libero</p>
            </div>
          </li>

          <li>
            <div class="banner-info">
              <h2>2Make your <span>garden</span> look like paradise!</h2>
              <div class="line"> </div>
              <p>Eget rhoncus nulla rutrum sit amet. Ut sodales erat tortor Aliquam sit amet lorem dui. Donec quis
                suscipit tortor vel pellentesque libero Nulla sagittis dolor id mi tincidunt varius</p>
            </div>
          </li>

          <li>
            <div class="banner-info">
              <h2>3Steady <span>growth</span> for your farm! </h2>
              <div class="line"> </div>
              <p>Aliquam sit amet lorem dui Ut sodales erat tortor, Nulla sagittis dolor id mi tincidunt varius. Donec
                quis suscipit tortor vel pellentesque libero eget rhoncus nulla rutrum sit amet</p>
            </div>
          </li>




        </ul>

        <div class="static">
          <!-- <span class="stat"></span> -->
        </div>
      </div>

    </article>

    <!-- main内容 -->
    <article class="Main">




      <!-- 内容1 -->
      <div class="container inner clearfix">
        <div class="animated fl conta_r1" >
          <h3>Nullam consectetur tristique fermentum vestibulum</h3>
          <h5>Cras porttitor imperdiet volutpat. Nulla malesuada lectus eros ut convallis felis <span>consectetur
              ut</span></h5>
          <p>Proin eget ipsum ultrices, aliquet velit eget, tempus tortor. Phasellus non velit sit amet diam
            faucibus molestie. Mauris sapien eros, mattis et elit non, tincidunt efficitur nisi augue dui iaculis
            nulla, a pretium nisl turpis vel augue auctor viverra aliquam .</p>
          <div class="see-button">
            <a class="" href="#">
              See More
            </a>
          </div>


        </div>
        
        <div class="animated animated fl conta_r2" >
          <img _src="images/a1.jpg" alt="">
        </div>
      </div>
      <!-- 内容2 -->
      <div class="contet_tw">
        <div class="inner specialty clearfix">
          <!-- 内容2左侧 -->
          
          <div class="animated animated speci_let fl">
            <h3>Our Services</h3>
            <h5>Cras porttitor imperdiet volutpat nulla malesuada lectus eros ut convallis felis consectetur ut </h5>
            <p>Integer vitae ligula sed lectus consectetur pellentesque blandit nec orci. Nulla ultricies nunc et lorem
              semper, quis accumsan dui aliquam aucibus sagittis placerat.
              <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi
                non nibh nec enim sollicitudin interdum.tristique senectus et netus et malesuada fames ac turpis
                egestas</span>
            </p>
            <div class="see-button">
              <a class="" href="#" role="button">See More</a>
            </div>
          </div>
          <!-- 右侧 -->

          <div class="speci_rig fl">


            <div class="speiRigTop clearfix">
              
              <div class=" animated animated fl" >

                <div class="icn">
                  <span>

                  </span>
                </div>

                <h5>Proin eget ipsum ultrices</h5>
                <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
              </div>
              <div class=" animated animated fl" >

                <div class="icn">
                  <span></span>
                </div>

                <h5>Proin eget ipsum ultrices</h5>
                <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
              </div>

              <div class=" animated animated fl" >

                <div class="icn">
                  <span></span>
                </div>

                <h5>Proin eget ipsum ultrices</h5>
                <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
              </div>

              <div class=" animated animated fl" >

                <div class="icn">
                  <span></span>
                </div>

                <h5>Proin eget ipsum ultrices</h5>
                <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
              </div>

            </div>







          </div>
          <!--  -->
        </div>
      </div>
      <!-- bann -->

      <div class="testimonials ">

        <div class="inner contt">
         

          <div class="animated animated " >
            <h3>Testimonials</h3>
            <h5>Cras porttitor imperdiet volutpat nulla malesuada lectus eros <span>ut convallis felis consectetur ut
              </span></h5>
          </div>
          
          <div class="animated animated" >

            <p><span>"</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum iaculis diam quis
              sodales. Vestibulum eu dui tellus. In viverra porttitor auctor. Pellentesque habitant morbi tristique
              senectus et netus et malesuada fames ac turpis egestas<span> "</span></p>

          </div>

        </div>
      </div>

      <!-- 内容3 -->

      <div class="news">
        <div class="inner conte">
          <div class="news-text">
            <h3>News</h3>
            <h5>Cras porttitor imperdiet volutpat nulla malesuada lectus eros <span>ut convallis felis consectetur ut
              </span></h5>
          </div>
          <div class="news-grids clearfix">

            
            <div class="animated animated " >
              <h4>Integer vitae ligula sed lectus</h4>
              <span>8.00 - 10.00 | JUN 09,2014</span>
              <img _src="images/img1.jpg" alt="">
              <div class="news-info">
                <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele
                  risque auctor volutpat et massa.</p>
              </div>
            </div>
            <div class="animated animated" >
              <h4>Integer vitae ligula sed lectus</h4>

              <span>10.00 - 12.00 | sep 24,2014</span>
              <img _src="images/img2.jpg" alt="">
              <div class="news-info">
                <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele
                  risque auctor volutpat et massa.</p>
              </div>

            </div>
            <div class="animated animated" >
              <h4>Integer vitae ligula sed lectus</h4>
              <span>9.00 - 10.00 | FEB 15,2014</span>
              <img _src="images/img3.jpg" alt="">
              <div class="news-info">
                <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele
                  risque auctor volutpat et massa.</p>
              </div>
            </div>
            <div class="animated animated" >
              <h4>Integer vitae ligula sed lectus</h4>
              <span>11.00 - 10.00 | JUN 10,2014</span>
              <img _src="images/img4.jpg" alt="">
              <div class="news-info">
                <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele
                  risque auctor volutpat et massa.</p>
              </div>
            </div>

          </div>

        </div>
      </div>

      <!--  -->
    </article>

    <!-- 底部 -->
    <footer class="footer">
      <div class="inner clearfix">
        <!-- 左侧导航 -->
        
        <div class="nv fl animated">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="404.html">Events</a></li>
            <li><a href="mail.html">Mail Us</a></li>
          </ul>
          <form>
            <input type="text" placeholder="Email" required="">
            <input type="submit" value="Subscribe">
          </form>
        </div>

        <!-- 中间电话 -->
        <div class="fl foot_cen">
          <h3>Address</h3>
          <div class="address">
            <p>756 gt globel Place,
              <span>CD-Road,M 07 435.</span>
            </p>
          </div>
          <div class="phone">
            <p>+1(100)2345-6789</p>
          </div>
        </div>
        <!-- 右侧 -->

        <div class="foot_rig">
          <a href="#"><img src="images/logo.png" alt=""></a>
          <p>Proin eget ipsum ultrices, aliquet velit eget, tempus tortor. Phasellus non velit sit amet diam faucibus
            molestie tincidunt efficitur nisi.</p>
        </div>


      </div>
    </footer>

  </div>
</body>

</html>